<template>
  <div id="app">
    <!-- 头部 -->
    <div>
      <div class="topItem">
        <img
          class="logo"
          src="https://assets-cdn.lanqb.com/lanqb/logo05.png"
          alt=""
        />
        <div class="topItem-right">
          <div>注册有礼</div>
          <div>
            <span>注册</span>
            <span>登录</span>
          </div>
        </div>
      </div>
      <div class="banner">
        <img
          src="https://assets-cdn.lanqb.com/popupv3/2022/jun-ban_m.png"
          alt=""
        />
      </div>
    </div>

    <router-view />

    <!-- 底部 -->
    <div class="bottomItem" v-show="showTabbar">
      <router-link :to="{ name: 'index' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-h02.svg"
          alt=""
        />
        <p>首页</p>
      </router-link>

      <router-link :to="{ name: 'course' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-c01.svg"
          alt=""
        />
        <p>教程</p>
      </router-link>

      <router-link :to="{ name: 'school' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-t01.svg"
          alt=""
        />
        <p>网校</p>
      </router-link>

      <router-link :to="{ name: 'dachu' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-d01.svg"
          alt=""
        />
        <p>大触</p>
      </router-link>

      <router-link to="/community">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-cm01.svg"
          alt=""
        />
        <p>社区</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "LqbApp",

  data() {
    return {
      showTabbar:true,
    };
  },
  methods: {},
  watch:{
    // 隐藏tabbar
    $route(to){
      if(to.path.startsWith("/DachuLiveInfo") ){
        this.showTabbar = false;
      } else{
        this.showTabbar = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
#app {
  height: 100vh;
  overflow: hidden; // 禁止滚动
}
/* 头部 */
.topItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  overflow: hidden;
  .logo {
    width: 177px;
    height: 27px;
  }
  .topItem-right {
    height: 27px;
    width: 82px;
    animation: move 3s infinite;
  }
  div {
    height: 44px;
    text-align: center;
    line-height: 25px;
  }
}
@keyframes move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-44px);
  }
  100% {
    transform: translateY(0);
  }
}
.banner {
  height: 44px;
  img {
    width: 100%;
    height: 44px;
  }
}
/* 底部 */
.bottomItem {
  height: 51px;
  padding-top: 5px;
  background-color: #ccc;
  position: fixed;
  bottom: 0px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  a {
    &.router-link-exact-active {
      color: rgb(230, 26, 26);
    }
    p {
      font-size: 16px;
    }
  }
  img {
    width: 29px;
    height: 26px;
  }
}
</style>
